<template>
  <div class="global-config-panel p-2">
    <a-descriptions :data="info" size="large"  :column="1" class="px-1"/>
  </div>
</template>

<script setup>
import { useGraphStore } from '@/store/modules/graphStore'
import { computed } from 'vue'
import { getGraphColorList } from '@/utils/index.js'
import { getDictForValue } from '@/utils/dict.js'
import { ColorEnum } from '@/enum/graph.enum.js'
const graphStore = useGraphStore()
const { graph } = graphStore
const info = computed(() => {
  const { info } = graph
  const colorList = getGraphColorList(info.color)

  return [
    {
      label: '画布名称',
      value: info.name || '--'
    },
    {
      label: '模板编码',
      value: info.canvasKey ? info.canvasKey : '--'
    },
    {
      label: '画布尺寸',
      value: info.size || '--'
    },
    {
      label: '画布颜色',
      value: colorList.length ? colorList.map(v => v.label).join('') : '--'
    },
    {
      label: '背景颜色',
      value: info.backgroundColor ? ColorEnum[info.backgroundColor].label : '--'
    },
    {
      label: '叠加方式',
      value: info.overlapRule ? getDictForValue('OVERLAPRULETYPE', info.overlapRule) : '--'
    }
  ]
})
</script>
